<!-- 
 * @description: 注册
 * @fileName: register.vue 
 * @author: xiuxiu.deng 
 * @date: 2024-06-20 16:35:30 
 * @后台人员:  
 * @path:  
 * @version: V1.0.5 
!-->
<script setup lang="ts">
import { reactive, ref } from 'vue'

//自组件的引入
import account from './components/account.vue'
import info from './components/info.vue'
import success from './components/success.vue'

//步骤条的进度
const step = ref(1)
//账号信息
const accountInfo = reactive({
  account: '',
  smscode: '',
  captcha: ''
})
//转到信息完善界面
const toInfo = (data) => {
  Object.assign(accountInfo, data)
  step.value = 2
}
</script>

<template>
  <div class="registerPage">
    <el-card class="registerPanel">
      <!-- 步骤条 -->
      <el-steps class="registerStep" :active="step" align-center>
        <el-step title="账号验证" description="" />
        <el-step title="信息完善" description="" />
        <el-step title="注册完成" description="" />
      </el-steps>
      <!-- 每一步的内容 -->
      <div class="registerContent">
        <!-- 账号校验 -->
        <account v-if="step === 1" @next="toInfo"></account>
        <!-- 信息完善 -->
        <info
          v-else-if="step === 2"
          @pre="step = 1"
          @next="step = 3"
          :accountInfo="accountInfo"
        ></info>
        <!-- 注册完成 -->
        <success v-else></success>
      </div>
    </el-card>
    <div class="footer">@Copyright 君君军通用管理系统 备案信息：陕432432432</div>
  </div>
</template>

<style scoped>
.registerPage {
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  height: 100%;
}

.registerPage .registerPanel {
  width: 80%;
  height: 60%;
  max-width: 1024px;
  max-height: 800px;
  margin: 0 auto;
}

.registerPage .registerPanel .registerStep {
  width: 80%;
  margin: 0 auto;
  margin-top: 40px;
}

.registerPage .registerPanel .registerContent {
  margin-top: 40px;
}

.footer {
  position: fixed;
  bottom: 0px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #999;
}
</style>
